@charset "UTF-8";

////
/// 平台与浏览器适配相关方法
/// @author Clear, Molice, Zhoon, Kayo，Jeff
/// @group 兼容性封装
/// @date 2014-08-19
////

/// 清除浮动
///
/// @group 布局
/// @name clear
@mixin clear {
    &:after {
        clear: both;
        content: ".";
        display: block;
        line-height: 0;
        font-size: 0;
        visibility: hidden;
    }
}

%clear {
    @include clear;
}

/// 单行省略号
///
/// @group 外观
/// @name text-ellipsis
@mixin text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    //在IE9的<td>中，如果之前已经设置了word-wrap:break-word，则这里的white-space:nowrap会失效，所以要在这里加上word-wrap:normal来以防万一
    word-wrap: normal;
}

%text-ellipsis {
    @include text-ellipsis;
}

/// 多行省略号
///
/// @group 外观
/// @name text-multiLine-ellipsis
/// @param {Number} $line - 文字的行数
/// @param {Measure} $lineHeight - 文字行高
/// @throw 不支持多行省略的浏览器降级处理为结尾处没有省略号，直接裁剪掉。
@mixin text-multiLine-ellipsis($line: 2, $lineHeight: 20px) {
    line-height: $lineHeight;
    overflow: hidden;
    height: $lineHeight * $line;
    // stylelint-disable
    display: -webkit-box;
    display: -moz-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: $line;
    -moz-line-clamp: $line;
    line-clamp: $line;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-text-size-adjust: none;
    // stylelint-enable
    box-orient: vertical;
}

/// 在长单词或 URL 地址内部进行换行，适用于以中文为主混有英文的文字排版
///
/// @group 外观
/// @name text-breakWord
@mixin text-breakWord {
    word-wrap: break-word;
    word-break: break-word;
}

%text-breakWord {
    @include text-breakWord;
}

/// 适配多倍屏的 CSS 选择器
///
/// @group 设备适配
/// @name screenResolution
/// @param {Number} $num - 需要适配的屏幕倍数
@mixin screenResolution($num) {
    @media (-webkit-min-device-pixel-ratio: $num), (min--moz-device-pixel-ratio: $num), (min-device-pixel-ratio: $num), (min-resolution: #{$num}dppx), (min-resolution: #{$num * 96}dpi) {
        @content;
    }
}

/// 适配 IE 10 及以上版本的 CSS 选择器，需要针对 IE10 或以上版本的样式可以写在这里
///
/// @group 设备适配
/// @name screenForIE10AndLater
@mixin screenForIE10AndLater {
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        @content;
    }
}

/// 单独适配 IE 8 CSS 选择器，需要仅针对 IE 8 的样式可以写在这里
///
/// @group 设备适配
/// @name forIE8
@mixin forIE8 {
    @media \0screen {
        @content;
    }
}

/// 单独适配 IE 9 CSS 选择器，需要仅针对 IE 9（不包括 IE 10 等更高版本） 的样式可以写在这里
///
/// @group 设备适配
/// @name forIE9
@mixin forIE9 {
    @media all and (min-width: 0\0) and (min-resolution: .001dpcm) {
        @content;
    }
}

/// 半透明背景颜色
///
/// @group 外观
/// @name bgWithOpacity
/// @param {Color} $color - 背景色的颜色值
/// @param {Number} $alpha - 背景色的透明度
@mixin bgWithOpacity($color, $alpha) {
    background-color: rgba($color, $alpha);
    @include forIE8 {
        filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#{ie-hex-str(rgba($color, $alpha))}, endcolorstr=#{ie-hex-str(rgba($color, $alpha))});
    }
}

/// 跨浏览器的渐变背景，垂直渐变，自上而下
///
/// @group 外观
/// @name gradient-vertical
/// @param {Color} $start-color [#555] - 渐变的开始颜色
/// @param {Color} $end-color [#333] - 渐变的结束颜色
/// @param {Number} $start-percent [0%] - 渐变的开始位置，需要以百分号为单位
/// @param {Number} $end-percent [100%] - 渐变的结束位置，需要以百分号为单位
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
    background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{ie-hex-str($start-color)}", endColorstr="#{ie-hex-str($end-color)}", GradientType=0); // IE9 and down
}

/// 跨浏览器的渐变背景，水平渐变，自左而右
///
/// @group 外观
/// @name gradient-horizontal
/// @param {Color} $start-color [#555] - 渐变的开始颜色
/// @param {Color} $end-color [#333] - 渐变的结束颜色
/// @param {Number} $start-percent [0%] - 渐变的开始位置，需要以百分号为单位
/// @param {Number} $end-percent [100%] - 渐变的结束位置，需要以百分号为单位
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
    background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{ie-hex-str($start-color)}", endColorstr="#{ie-hex-str($end-color)}", GradientType=1); // IE9 and down
}

/// 跨浏览器的渐变背景，带角度
///
/// @group 外观
/// @name gradient-on-axis
/// @param {Degree} $axis-degree [135deg] - 渐变的轴
/// @param {Color} $start-color [#555] - 渐变的开始颜色
/// @param {Color} $end-color [#333] - 渐变的结束颜色
/// @param {Number} $start-percent [0%] - 渐变的开始位置，需要以百分号为单位
/// @param {Number} $end-percent [100%] - 渐变的结束位置，需要以百分号为单位
@mixin gradient-on-axis($axis-degree: 0, $start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
    background-image: linear-gradient($axis-degree, $start-color $start-percent, $end-color $end-percent);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{ie-hex-str($start-color)}", endColorstr="#{ie-hex-str($end-color)}", GradientType=0); // IE9 and down
}

/// 跨浏览器的渐变背景，垂直渐变，自上而下，支持三个渐变点
///
/// @group 外观
/// @name gradient-vertical-threeColor
/// @param {Color} $start-color [#555] - 渐变的开始颜色
/// @param {Color} $middle-color [#444] - 渐变的中间颜色
/// @param {Color} $end-color [#333] - 渐变的结束颜色
/// @param {Number} $start-percent [0%] - 渐变的开始位置，需要以百分号为单位
/// @param {Number} $start-percent [50%] - 渐变的中间位置，需要以百分号为单位
/// @param {Number} $end-percent [100%] - 渐变的结束位置，需要以百分号为单位
@mixin gradient-vertical-threeColor($start-color: #555, $middle-color: #444, $end-color: #333, $start-percent: 0%, $middle-percent: 50%, $end-percent: 100%) {
    background-image: linear-gradient(to bottom, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{ie-hex-str($start-color)}", endColorstr="#{ie-hex-str($end-color)}", GradientType=0); // IE9 and down
}

/// 跨浏览器的渐变背景，水平渐变，自左而右
///
/// @group 外观
/// @name gradient-horizontal-threeColor
/// @param {Color} $start-color [#555] - 渐变的开始颜色
/// @param {Color} $middle-color [#444] - 渐变的中间颜色
/// @param {Color} $end-color [#333] - 渐变的结束颜色
/// @param {Number} $start-percent [0%] - 渐变的开始位置，需要以百分号为单位
/// @param {Number} $start-percent [50%] - 渐变的中间位置，需要以百分号为单位
/// @param {Number} $end-percent [100%] - 渐变的结束位置，需要以百分号为单位
@mixin gradient-horizontal-threeColor($start-color: #555, $middle-color: #444, $end-color: #333, $start-percent: 0%, $middle-percent: 50%, $end-percent: 100%) {
    background-image: linear-gradient(to right, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{ie-hex-str($start-color)}", endColorstr="#{ie-hex-str($end-color)}", GradientType=1); // IE9 and down
}

/// 基于渐变实现的垂直方向点画线
/// @throw 如果要实现的是一个物理像素粗细的线，建议放在一个单独的 DOM 上，方便加上 scale 来实现，否则就不需要顾虑直接用到任意 DOM 上即可，加上 background-position 控制位置，background-color / background-position 等属性必须在该 mixin 的 include 之后开始写。
///
/// @group 外观
/// @name gradient-vertical-dashed-line
/// @param {Number} $dash-dot-width [2px] - 点画线里点的尺寸
/// @param {Number} $dash-space-width [2px] - 点画线里点与点间隔尺寸
/// @param {Color} $dash-dot-color [$common_color_separator] - 点画线里点的颜色
/// @param {Number} $line-width [1px] - 点画线粗细
@mixin gradient-vertical-dashed-line($dash-dot-width: 2px, $dash-space-width: 2px, $dash-dot-color: $common_color_separator, $line-width: 1px) {
    @include gradient-vertical-threeColor($start-color: $dash-dot-color, $middle-color: $dash-dot-color, $end-color: transparent, $start-percent: 0, $middle-percent: $dash-dot-width, $end-percent: $dash-dot-width);
    background-size: $line-width ($dash-dot-width + $dash-space-width);
    background-repeat: repeat-y;
}

/// 基于渐变实现的水平方向点画线
/// @throw 如果要实现的是一个物理像素粗细的线，建议放在一个单独的 DOM 上，方便加上 scale 来实现，否则就不需要顾虑直接用到任意 DOM 上即可，加上 background-position 控制位置，background-color / background-position 等属性必须在该 mixin 的 include 之后开始写。
///
/// @group 外观
/// @name gradient-horizontal-dashed-line
/// @param {Number} $dash-dot-width [2px] - 点画线里点的尺寸
/// @param {Number} $dash-space-width [2px] - 点画线里点与点间隔尺寸
/// @param {Color} $dash-dot-color [$common_color_separator] - 点画线里点的颜色
/// @param {Number} $line-width [1px] - 点画线粗细
@mixin gradient-horizontal-dashed-line($dash-dot-width: 2px, $dash-space-width: 2px, $dash-dot-color: $common_color_separator, $line-width: 1px) {
    @include gradient-horizontal-threeColor($start-color: $dash-dot-color, $middle-color: $dash-dot-color, $end-color: transparent, $start-percent: 0, $middle-percent: $dash-dot-width, $end-percent: $dash-dot-width);
    background-size: ($dash-dot-width + $dash-space-width) $line-width;
    background-repeat: repeat-x;
}
